<template>
  <el-row class="mv-details">
    <el-col :span="17">
      <div class="grid-content">
        <h1>mv详情</h1>
        <video :src="mv.url" controls preload></video>
      </div>
    </el-col>
    <el-col :span="7">
      <div class="grid-content">
        <h1>相关推荐</h1>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      mv: "",
    };
  },
  methods: {
    getMv() {
      axios({
        method: "get",
        url: "https://autumnfish.cn/mv/url",
        params: {
          id: this.$route.query.mvid,
        },
      }).then((res) => {
        this.mv = res.data.data;
      });
    },
  },
  created() {
    this.getMv();
  },
  watch: {},
};
</script>

<style lang="scss">
.mv-details {
  width: 1100px;
  margin: 20px 0;
  h1 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  video {
    width: 750px;
  }
}
</style>